<template>
    <div class="ranking-list">
        <my-header>
      <div class="header-box">
        <router-link to="/home">
          <div class="jiantou"></div>
        </router-link>
        <span>收益排行榜</span>
      </div>
    </my-header>
    <div class="list">
        <ul>
            <li v-for="(item,index) in rankingListArr" :key="item.id">
                <div class="right">
                    <span>{{index+1}}</span>
                    <span>{{item.userName}}</span>
                </div>
                <div class="left">
                <span>{{item.balance}}元</span>

                </div>
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import axios from 'axios';
import {baseURL} from '../http/require.js'
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

export default {
    components:{MyHeader},
    data() {
        return {
            rankingListArr:''
        }
    },
    methods: {
        init() {
            const toast = Toast.loading({
         duration: 0, // 持续展示 toast
         forbidClick: true,
         message: "加载中..."
     });
            axios.get(`${baseURL}/user/check`)
            .then(response =>{
                if(response.data.code == 200) {
                    Toast.clear()
                    let data = response.data.rows
                    this.rankingListArr = data.sort((a,b) => {
                       return b.balance - a.balance
                    })
            // console.log(this.rankingListArr);

                }
            })
        }
    },
    created() {
        this.init()
    }
}
</script>
<style lang="scss" scoped>
@import '../css/reset.css';
.ranking-list {
    width: 100%;
    .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    .jiantou {
      flex-grow: 1;
      width: 15px;
      height: 15px;
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      transform: rotate(320deg);
      margin-left: 15px;
    }
    span {
      flex-grow: 1;
    }
  }
  .list {
    width: 100%;
    ul {
        width: 100%;
        li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            margin-top: 10px;
            border-bottom: 1px solid #faca2a;
            .right {
                flex-grow: 1;
                padding-left: 15px;
                font-size: 20px;
                span {
                    margin-right: 20px;
                }
            }
            .left {
                flex-grow: 1;
                // width: 100%;
                padding-right: 15px;
                display: flex;
                justify-content: flex-end;
                span {
                font-size: 18px;
                color: red;
                font-weight: 600;
            }
            }
           
        }
    }
  }
}
</style>